<template>
  <q-page class='fit q-pa-md q-gutter-y-md text-body1'>
    <div class='fit'>
      <q-tabs v-model='status' align='justify' class='text-primary'>
        <q-tab :name='4' label='全部' />
        <q-tab :name='0' label='待发货' />
        <q-tab :name='1' label='运输中' />
        <q-tab :name='2' label='待收货' />
        <q-tab :name='3' label='已完成' />
      </q-tabs>
    </div>
    <q-card bordered>
      <q-table
        title='订单列表'
        :columns='columns'
        :rows='rows'
        :loading='loading'
        :rows-per-page-options='[5,10,20]'
        v-model:pagination='pagination'
        @request='getList'
      >
        <template #no-data>
          <div class='full-width row flex-center q-gutter-sm text-body1'>
            暂无数据
          </div>
        </template>
        <!--按货物ID搜索-->
        <template #top-right v-if='status===4'>
          <q-input borderless dense debounce='300' placeholder='输入订单编号进行查询'
                   v-model.number='id' @keyup.enter='search'>
            <template v-slot:append>
              <q-icon name='search' />
            </template>
          </q-input>
        </template>
        <!--点击跳转到详情页-->
        <template #body-cell-goodsName='props'>
          <q-td :props='props'>
            <q-btn
              flat class='fit'
              @click='toDetail(props.row.id)'
              :label='props.row.goodsName'
            />
          </q-td>
        </template>
      </q-table>
    </q-card>
  </q-page>
</template>

<script lang='ts'>
import { defineComponent, ref, computed, watch } from 'vue';
import { getAdminOrderList, searchAdminOrders } from 'src/services/api';
import { mapOrderStatus } from 'src/services/mapper';
import { router } from 'src/router';
import { TableOption } from 'app/typings';

export default defineComponent({
  name: 'OrdersManage',
  setup() {
    const toDetail = async (id: number) => {
      await router.push({ path: '/order_detail', query: { id } });
    };
    const status = ref(4);
    const loading = ref(false);
    const id = ref<number>();
    const pagination = ref({
      page: 1,
      rowsNumber: 0,
      rowsPerPage: 5
    });
    const columns = computed(() => {
      const fields: Array<unknown> = [{
        name: 'goodsName',
        label: '货物名称',
        field: 'goodsName',
        align: 'center'
      }, {
        name: 'id',
        label: '订单编号',
        field: 'id',
        align: 'center'
      }, {
        name: 'goodsType',
        label: '货物类型',
        field: 'goodsType',
        align: 'center'
      }, {
        name: 'senderUsername',
        label: '寄件人',
        field: 'senderUsername',
        align: 'center'
      }, {
        name: 'receiverUsername',
        label: '收件人',
        field: 'receiverUsername',
        align: 'center'
      }];
      if (status.value === 4) {
        fields.push({
          name: 'status',
          label: '订单状态',
          field: 'status',
          align: 'center',
          format: (val: number) => mapOrderStatus(val)
        });
      }
      return fields;
    });

    const rows = ref();

    const getList = async (options: TableOption) => {
      loading.value = true;
      try {
        const response = await getAdminOrderList({
          pageNum: options.pagination.page,
          pageSize: options.pagination.rowsPerPage,
          status: status.value
        });
        rows.value = response.items;
        pagination.value.page = options.pagination.page;
        pagination.value.rowsPerPage = options.pagination.rowsPerPage;
        pagination.value.rowsNumber = response.total;
      } catch (error) {
      }
      loading.value = false;
    };

    const search = async () => {
      loading.value = true;
      try {
        let response;
        if (id.value) {
          response = await searchAdminOrders({
            pageNum: pagination.value.page,
            pageSize: pagination.value.rowsPerPage,
            id: id.value
          });
        } else {
          response = await getAdminOrderList({
            pageNum: pagination.value.page,
            pageSize: pagination.value.rowsPerPage,
            status: status.value
          });
        }
        rows.value = response.items;
        pagination.value.rowsNumber = response.total;
      } catch (error) {
      }

      loading.value = false;
    };

    watch(() => status.value, async () => {
      id.value = undefined;
      await getList(
        {
          pagination:
            {
              page: pagination.value.page,
              rowsPerPage: pagination.value.rowsPerPage
            }
        });
    }, { immediate: true });

    return {
      toDetail,
      status,
      columns,
      rows,
      loading,
      pagination,
      id,
      getList,
      search
    };
  }
});
</script>
